<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layout 管理界面大布局示例 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.9.23/dist/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="./首页.css">
    <link href="//unpkg.com/layui@2.9.23/dist/css/layui.css" rel="stylesheet">
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black" style="height: 100px;">
                <img src="https://img1.baidu.com/it/u=3029394063,3849121399&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741366800&t=facbf90abffc6ddee538c6252f10e09e"
                    class="user_img"><br>
                <span class="big_name" style="font-size: 25px;">用户</span>
            </div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>
                <li class="layui-nav-item layui-hide-xs" onclick="tui()"><a href="javascript:;"
                        style="font-size: 20px;">
                        <= 退出登录</a>
                </li>
                <li class="layui-nav-item">
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">menu 11</a></dd>
                        <dd><a href="javascript:;">menu 22</a></dd>
                        <dd><a href="javascript:;">menu 33</a></dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                    <a href="javascript:;" onclick="center()">
                        <img src="https://img1.baidu.com/it/u=3029394063,3849121399&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741366800&t=facbf90abffc6ddee538c6252f10e09e" class="layui-nav-img">
                        个人中心
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" onclick="people()">添加个人信息</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;"></a>
                    </li>
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;"></a>
                    </li>
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;"></a>
                    </li>
                    <li class="layui-nav-item" style="text-align: center;">
                        <a href="javascript:;" onclick="shou()">讲师管理</a>
                    </li>
                    <li class="layui-nav-item" style="text-align: center;">
                        <a href="javascript:;" onclick="tu()">仪表盘</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <blockquote class="layui-elem-quote layui-text">
                    <span style="color: #659dcc;">讲师管理</span> / <span style="color: #818486;">讲师列表</span>
                </blockquote>
                <div class="layui-card layui-panel">
                    <div class="layui-card-header">
                    </div>

                    <div class="layui-card-body">
                        <!-- -------------------表格 --------------------- -->
                        <div class="zhu">
                            <button class="add" onclick="kuang()">添加讲师</button><br>
                            <input type="text" class="content"> <button class="sou" onclick="sou()">搜索</button>
                            <table class="layui-table" id="chang">
                                <colgroup>
                                    <col width="150">
                                    <col width="150">
                                    <col>
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>姓名</th>
                                        <th>昵称</th>
                                        <th>出生日期</th>
                                        <th>性别</th>
                                        <th>手机号码</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="data-list">

                                </tbody>
                            </table>
                        </div>


                        <!-- -----------添加框---------- -->
                        <div class="jia" style="margin-left: 400px;display: none;">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>姓名</td>
                                        <td style="padding-left: 15px;"><input type="text" placeholder="讲师名称"></td>
                                    </tr>
                                    <tr>
                                        <td>昵称</td>
                                        <td style="padding-left: 15px;"><input type="text"></td>
                                    </tr>
                                    <tr>
                                        <td>生日</td>
                                        <td style="padding-left: 15px;"><input type="text"></td>
                                    </tr>
                                    <tr>
                                        <td>手机号</td>
                                        <td style="padding-left: 15px;"><input type="text"></td>
                                    </tr>
                                    <tr>
                                        <td>性别</td>
                                        <td style="padding-left: 15px;">
                                            <input type="radio" class="gend" value="0" name="1">男&emsp;
                                            <input type="radio" class="gend" value="1" name="1">女
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <button onclick="add()"
                                style="background-color: #5cb85c;color: white;border: none;padding: 4px 5px;margin-left: 200px;border-radius: 3px;">添加</button>
                        </div>

                        <!-- ---------------- 个人中心 ------------------ -->
                        <div class="geren" style="display: none;margin-left: 600px;">
                            <h1>个人信息</h1><br>
                            <table border="0px">
                                <tbody>
                                    <tr>
                                        <td>姓&emsp;名</td>
                                        <td style="padding-left: 15px;"><span class="one"
                                                style="font-size: 25px;"></span></td>
                                    </tr>
                                    <tr>
                                        <td>头&emsp;像</td>
                                        <td style="padding-left: 15px;"><img src="./微信图片_20250226134526.jpg"
                                                class="img"></td>
                                    </tr>
                                    <tr>
                                        <td>昵&emsp;称</td>
                                        <td style="padding-left: 15px;"><input type="text" class="two"></td>
                                    </tr>
                                    <tr>
                                        <td>性&emsp;别</td>
                                        <td style="padding-left: 15px;"><input type="radio" class="gender" value="0"
                                                name="0">男
                                            <input type="radio" class="gender" value="1" name="0" checked>女
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>出生日期</td>
                                        <td style="padding-left: 15px;"><input type="text" class="three">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>籍&emsp;贯</td>
                                        <td style="padding-left: 15px;"><select>
                                                <option value="北京市">北京市</option>
                                            </select>
                                            <select>
                                                <option value="市辖区">市辖区</option>
                                            </select>
                                            <select>
                                                <option value="东城区">东城区</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>手机号码</td>
                                        <td style="padding-left: 15px;"><input type="text" class="ipon"></td>
                                    </tr>
                                    <tr>
                                        <td>电子邮箱</td>
                                        <td style="padding-left: 15px;"><input type="text" class="eml"></td>
                                    </tr>
                                    <tr>
                                        <td>入职日期</td>
                                        <td style="padding-left: 15px;"><input type="text" class="in">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>个人介绍</td>
                                        <td style="padding-left: 15px;"><textarea
                                                style="width: 245px;height: 130px;">我志愿加入中国共产主义青年团，坚决拥护中国共产党的领导，遵守团的章程，执行团的决议，履行团员义务，严守团的纪律，勤奋学习，积极工作，吃苦在前，享受在后，为共产主义事业而奋斗</textarea>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- --------------编辑 -------------- -->
                        <div class="bji" style="display: none;">
                            姓名: <input type="text"><br>
                            出生日期: <input type="text"><br>
                            性别: <input type="radio" name="1" value="0" class="xbie"> 男 &emsp;
                            <input type="radio" name="1" value="1" class="xbie"> 女<br>
                            <button style="background: #5cb85c;" class="bj" onclick="gai()">编辑</button>
                        </div>

                        <!-- --------------添加个人信息--------------- -->
                        <div class="xingxi">
                            <h1>添加个人信息</h1><br><br>
                            姓名：<input type="text"><br><br>
                            昵称：<input type="text"><br><br>
                            头像：<input type="text"><br><br>
                            手机号码: <input type="text"><br><br>
                            生日： <input type="text"><br><br>
                            邮箱： <input type="text"><br><br>
                            入职时间：<input type="text"><br><br>
                            <button onclick="tianjia()" style="padding: 6px 15px;">添加</button>
                        </div>

                        <!-- ----------------图表--------------------- -->
                        <div class="tubiao" style="display: none;">
                            <div class="num" style="background-color: #fc8675;">
                                <img src="./收入.png">
                                <div
                                    style="display: inline-block;margin-top: 25px;color: white;position: fixed;margin-left: 10px;">
                                    我的收入<br>￥11.11</div>
                            </div>
                            <div class="num" style="background-color: #5ab6df;">
                                <img src="./课程.png">
                                <div
                                    style="display: inline-block;margin-top: 25px;color: white;position: fixed;margin-left: 10px;">
                                    课程数量<br>12</div>
                            </div>
                            <div class="num" style="background-color: #65cea7;">
                                <img src="./用户数量.png" style="width: 50px;height: 60px;">
                                <div
                                    style="display: inline-block;margin-top: 25px;color: white;position: fixed;margin-left: 10px;">
                                    用户数量<br>236</div>
                            </div>
                            <div class="num" style="background-color: #ebc85e;">
                                <img src="./浏览量.png">
                                <div
                                    style="display: inline-block;margin-top: 25px;color: white;position: fixed;margin-left: 10px;">
                                    浏览量<br>22435</div>
                            </div>
                            <div id="main"
                                style="width: 500px;height: 450px;display: inline-block;margin-top: 20px;">
                            </div>
                            <div id="main1"
                                style="width: 700px;height: 520px;display: inline-block;margin-top: 20px;">
                            </div>
                        </div>
                    </div>
                </div>
                <br><br>
            </div>
        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            <div class="bot">
                <div id="pagination">
                    <button onclick="fetchData(currentPage - 1)" class="bott">上一页</button>
                    <span id="current-page">1</span> / <span id="total-pages">1</span>
                    <button onclick="fetchData(currentPage + 1)" class="bott">下一页</button>
                </div>
            </div>
        </div>
    </div>

    <script src="//unpkg.com/layui@2.9.23/dist/layui.js"></script>
    <script src="./首页.js"></script>
    <script src="//unpkg.com/layui@2.9.23/dist/layui.js"></script>
</body>

</html>